<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no" />
	<title>速翔网络</title>
	<link rel="stylesheet" type="text/css" href="../c/aui.css" />
	<style>
		.aui-grid,
		.aui-list
		,.aui-list.aui-list-in .aui-list-item
		{
			background: none !important;
			color: #fff !important;
			border: 0 !important;
		}

		.aui-grid .aui-row {
			margin: 0;
			margin-bottom: 1.1rem;
		}

		.aui-grid .aui-grid-label {
			border: 1px solid #555;
			padding: 0.75rem 0;
			color: #fff;
			font-size: 0.85rem;
			font-weight: bold;
			margin-top: 0px;
		}

		.aui-grid [class*=aui-col-] {
			padding: 0;
			margin-left: 1.4rem;
			width: 23%;
			margin-top: 1rem;
		}

		.aui-grid h3 {
			background: #333;
			padding: 0.45rem 0.75rem;
			font-size: 0.75rem;
		}

		.aui-col-xs-4 input {
			border: 1px solid #555;
			color: #fff;
			text-align: center;
			font-size: 0.85rem;
			font-weight: bold;
			padding: 1.4rem 0;
		}


		.aui-list-item-inner {
			font-size: 0.7rem;
		}

		.asdasd {
			border: 1px solid #FF2D4B !important;
			-webkit-transition: all .3s;
					transition: all .3s;
		}

		.aui-grid .aui-iconfont {
			color: #FF2D4B;
			position: absolute;
			top: 1rem;
			right: 0.75rem;
			font-size: 0.55rem;
			font-weight: bold;
			border: 1px solid #FF2D4B;
			border-radius: 50%;
			width: 1.1rem !important;
			height: 1.1rem !important;
			line-height: 1.1rem !important;
			padding-left: 0.2rem;
		}

		.aui-col-xs-4 em.aui-badge {
			position: absolute;
			font-weight: bold;
			background: #ccc;
			top: -0.5rem;
		}

		.asdasd em {
			background: #FF2D4B !important
		}

		.yuji {
			overflow: hidden;
			background: #333;
			padding: 0.75rem;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.aui-grid .aui-iconfont{
			background:#FE2C55 !important;
			color: #fff;
		}
		.aui-list-item-inner{
			color: #fff;
			font-size: 0.75rem;
		}
		.aui-list-item-label-icon img{
			background: #fff;
			border-radius: 50%;
			width: 1.68rem;
		}
		.aui-list .aui-list-item{
			min-height: 3rem;
		}
		#yuji{
			font-size: 1rem;
		}
		.ems .aui-list-item-inner{
			color: #FE2C55 !important;
			-webkit-transition: all .3s;
					transition: all .3s;
		}
	</style>
</head>

<body>
	<section class="aui-grid">
		<h3>充值金额 </h3>
		<div class="aui-row">

			<div class="aui-col-xs-4 ">
				<div class="aui-grid-label asdasd" data-money='50' tapmode onclick="m(this)">
					50
				</div>
			</div>
			<div class="aui-col-xs-4 ">
				<div class="aui-grid-label" data-money='100' tapmode onclick="m(this)">
					100
				</div>
			</div>
			<div class="aui-col-xs-4 ">
				<div class="aui-grid-label" data-money='300' tapmode onclick="m(this)">
					300
				</div>
			</div>
			<div class="aui-col-xs-4">
				<div class="aui-grid-label" data-money='500' tapmode onclick="m(this)">
					500
				</div>
			</div>
			<div class="aui-col-xs-4">
				<div class="aui-grid-label" data-money='1000' tapmode onclick="m(this)">
					1000
				</div>
			</div>
			<div class="aui-col-xs-4" id="inputs">
				<input id="input" tapmode onclick="i(this)" type="tel" placeholder="其他金额" value="">
			</div>

		</div>
		<h3>支付方式</h3>
		<div class="aui-content">
			<ul class="aui-list aui-list-in">
				<li class="aui-list-item ems aui-hide" data-pay="ALI_APP" tapmode onclick="x(this)">
					<div class="aui-list-item-label-icon">
						<img src="../i/share/alipay.png" />
					</div>
					<div class="aui-list-item-inner">
						支付宝
					</div>
					<em class="aui-iconfont aui-icon-correct"></em>
				</li>
				<li class="aui-list-item aui-hide" data-pay="WX_APP" tapmode onclick="x(this)">
					<div class="aui-list-item-label-icon">
						<img src="../i/share/session.png" />
					</div>
					<div class="aui-list-item-inner">
						微信
					</div>
				</li>
			</ul>
		</div>
		<div class="yuji">
			<span class="aui-font-size-14">预计获得</span>
			<span style="color:#FF2D4B " id="yuji">0</span>
		</div>
	</section>
	<div style="width: 90%;margin: 0 auto;margin-top: 2rem;">
		<div class="aui-btn-block aui-btn aui-btn-info" tapmode onclick="data()">确认充值</div>
	</div>
</body>
<script type="text/javascript" src="../j/api.js"></script>
<script type="text/javascript">
	var yuji = 0;
	apiready = function() {
		_user = _getPrefs('_user');
		if(_getPrefs('_config').pay.alipay == 1){
			$('[data-pay="ALI_APP"]').removeClass('aui-hide');
		}
		if(_getPrefs('_config').pay.weixin == 1){
			$('[data-pay="WX_APP"]').removeClass('aui-hide');
		}
		//	FastClick.attach(document.body)
		$('#yuji').html('0' + (_getPrefs('_config').zhibo.liwu_name))
		// beecloud = api.require('beecloud');
		var yujiMoney = $('.asdasd').data('money')

		// $(".aui-grid-label").each(function() {
		// 	var text = $(this).text();
		// 	text = parseInt(text * _getPrefs('_config').zhibo.zuan);
		// 	if (text) {
		// 		$(this).append('<em class="aui-badge">+' + text + '</em>')
		// 	}
		// });
	//	$('#inputs').append('<em class="aui-badge">+0</em>')
		yuji = parseInt(yujiMoney * _getPrefs('_config').zhibo.zuan) + _getPrefs('_config').zhibo.liwu_name;
		$('#yuji').text(yuji);
		$("#input").bind("input propertychange", function() {
			var yujiMoney = $("#input").val()
			yuji = parseInt(yujiMoney * _getPrefs('_config').zhibo.zuan) + _getPrefs('_config').zhibo.liwu_name;
			$('#yuji').text(yuji)
		});
	}

	function data() {
		var money = parseInt($('.asdasd').data('money'));
		if (!money) {
			money = parseInt($('.asdasd').val());
			if (!money) {
				_msg('请选择或输入充值金额')
				return;
			}
		}
		if (_getPrefs('_config').config.zuidichongzhi) {
			if (money < _getPrefs('_config').config.zuidichongzhi) {
				_msg('最低充值' + _getPrefs('_config').config.zuidichongzhi);
				return;
			}
		}
		var channel = $('.ems').data('pay')
		if (!channel) {
			_msg('请选择支付方式');
			return;
		}
		money = money * 100
		_pay({
			money: money,
			channel: channel,
			type:'1'
		})

	}

	function pays(data) {
		return _msg('支付未开通配置 请在后台支付配置！');
		_loading('正在请求')
		_ajax('member/pay_code', function(ret, err) {
		//	console.log(JSON.stringify(ret) + JSON.stringify(err))
			_loadingCloes()
			if (ret) {
				if (ret.ret) {
					// 判断结束
					var payData = {
						title: '用户(ID' + _user.id + ')充值' + ((data.money / 100)* _getPrefs('_config').zhibo.zuan) + _getPrefs('_config').zhibo.liwu_name,
						totalfee: data.money,
						billno: ret.ret,
						channel: data.channel,
						optional: {
							uid: _user.id,
							payname: '充值' + _getPrefs('_config').zhibo.liwu_name,
							type:data.type
						}
					};
					beecloud.pay(payData, payCallBack);
					function payCallBack(ret, err) {
						_heibai();
						if (ret) {
							if (ret.result_code == 0) {
								_userInfo();
								if (ret.result_msg == '支付成功') {
									return _alert('已成功充值' + (data.money / 100)* _getPrefs('_config').zhibo.zuan + _getPrefs('_config').zhibo.liwu_name,function(ret,err){
										api.sendEvent({
										    name: 'zhibo_view_frm_liwu',
										    extra: {
										        hide: true
										    }
										});
									})
								}
							}
							if (ret.errMsg) {
								_alert(JSON.stringify(ret))
							} else {
								_msg(ret.result_msg)
							}
						} else {
							_alert(JSON.stringify(err))
						}
					}
				} else {
					_alert('ret.err:' + ret.err)
				}
			} else {
				_alert(JSON.stringify(err))
			}
		}, data)
	}

	function x(_this) {
		$('.ems').removeClass('ems')
		$(_this).addClass('ems')
		var pay = $(_this).data('pay');
		$('.aui-list-in .aui-list-item em').remove()
		$(_this).append('<em class="aui-iconfont aui-icon-correct"></em>')
	}

	function i(_this) {
		document.getElementById("input").focus()
		$('.asdasd').removeClass('asdasd')
		$(_this).addClass('asdasd')
		$('#inputs em').css('background', '#FF2D4B')
		var yujiMoney = $(_this).val()
		yuji = parseInt(yujiMoney * _getPrefs('_config').zhibo.zuan) + _getPrefs('_config').zhibo.liwu_name;
		$('#yuji').text(yuji)
	}

	function m(_this) {
		document.activeElement.blur();
		$('.asdasd').removeClass('asdasd')
		$(_this).addClass('asdasd')
		$('#inputs em').css('background', '#ccc')
		var yujiMoney = $('.asdasd').data('money')
		yuji = parseInt(yujiMoney * _getPrefs('_config').zhibo.zuan) + _getPrefs('_config').zhibo.liwu_name;
		$('#yuji').text(yuji);
	}
</script>

</html>
